

module.exports = function (content) {

  /**
   * 1. 直接使用style-loader，只能处理样式资源，无法处理样式中的其他引入资源
   *  use:["./loaders/style-loader",]
   *
   * 2. 借助css-loader解决
   * use:["./loaders/style-loader","css-loader"]
   * 问题是 css-loader 暴露了一段js代码， style-loader需要执行js代码，得到返回值，再动态创建style标签插入到页面上
   * 不好操作
   * 
   * 3. style-loader使用 pitch loader用法
  //  */
  // const script = `
  //   const styleEl = document.createElement('style');
  //   styleEl.innerHTML = ${JSON.stringify(content)};
  //   document.head.appendChild(styleEl);
  // `
  // return script
}

module.exports.pitch = function (remainingRequest) {
  console.log(remainingRequest);
  // remainingRequest: 剩下还需要处理的loader
  // /Users/lvcanfa/Desktop/Learning/WP_Learn/MyLoader/node_modules/css-loader/dist/cjs.js!/Users/lvcanfa/Desktop/Learning/WP_Learn/MyLoader/src/css/index.css
  // 1. 将 remainingRequest 中绝对路径改变成相对路径(因为后面只能使用相对路径操作)
  // 绝对路径转相对路径
  const relativePath = remainingRequest.split("!").map(
    absolutePath => {
      return this.utils.contextify(this.context, absolutePath)
    }
  ).join("!")
  console.log(relativePath);
  // ../../node_modules/css-loader/dist/cjs.js!./index.css
  // 2. 引入css-loader处理后的资源
  // 3. 创建style，将内容插入页面中生效

  const script = `
    import style from "!!${relativePath}";
    const styleEl = document.createElement('style');
    styleEl.innerHTML = style;
    document.head.appendChild(styleEl);
  `
  return script
}